<template>
  <div>
    <div class="box">
      <div style="text-align: center;">
        <el-form ref="form" :model="form">
          <el-divider></el-divider>
          <div>渔方图片</div>
          <el-divider></el-divider>
          <div style=" width: 50%; margin:40px auto;">
            <el-form-item prop="file" >
              <el-upload
                style="text-align: center;"
                class="upload-demo"
                ref="uploads"
                multiple
                action=""
                :http-request="httpRequest"
                :auto-upload="false"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                :show-file-list="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取文件</el-button
                >
                <el-button
                  style="margin-left:5px"
                  size="small"
                  type="primary"
                  @click="submitUploadList"
                  >上传
                </el-button>
              </el-upload>
              <el-dialog
                :visible.sync="dialogVisible"
                style="text-align: center;"
              >
                <img
                  style="width: 200px; height: 200px;"
                  :src="dialogImageUrl"
                  alt=""
                />
              </el-dialog>
            </el-form-item>
            <div v-if="dialogImageUrl" style="text-align: center;">
              <img width="200px" height="200px" :src="dialogImageUrl" alt="" />
            </div>
          </div>
          <el-divider></el-divider>
          <div>渔方视频</div>
          <el-divider></el-divider>
          <div style=" width: 50%; margin:40px auto;">
            <el-form-item prop="file">
              <el-upload
                class="upload-demo"
                ref="upload"
                multiple
                action=""
                :http-request="httpRequests"
                :auto-upload="false"
                :before-upload="beforeAvatarUploads"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreviews"
                :show-file-list="false"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >选取渔方视频</el-button
                >
                <el-button
                  style="margin-left:5px"
                  size="small"
                  type="primary"
                  @click="submitUploadLists"
                  >上传
                </el-button>
              </el-upload>
              <div
                v-if="video"
                style="text-align: center; margin: 50px 0;"
              >
                <video
                  width="300px"
                  height="300px"
                  :src="video"
                  controls="controls"
                />
              </div>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即配置</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>

      
      </div>
    </div>
  </div>
</template>

<script>
import { uploadFileToOss ,configureFishPart} from "@/api/user";
import { Toast } from "vant";
export default {
  data() {
    return {
      dialogImageUrl: "", //图片
      dialogVisible: false,
      videoFlag: false,

      form: {
        name: "",
        seat: "", //轮播图排序
        sort: "", // 轮播图位置
        id: ""
      },
      video:''
    };
  },
  methods: {
   
// 配置渔方信息按钮
async onSubmit(){

    let data ={
        image:this.dialogImageUrl,
        video:this.video
    }
    let result = await configureFishPart(data)
    if(result.code==0){
        Toast.success('配置渔方信息成功')
        this.$router.push('/smartFish/index/index')
    }else{
        Toast.fail('配置渔方信息失败,请稍后再试')
    }
 
},
    async httpRequest(param) {
      
        this.updateInit = false

      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.dialogImageUrl = result.data;
      }
      this.$nextTick(() => {
        this.updateInit = true
      })

    },
    async httpRequests(param) {
        
      let fileObj = param.file; // 相当于input里取得的files
      let formData = new FormData(); // FormData 对象
      formData.append("file", fileObj); // 文件对象
      let result = await uploadFileToOss(formData);
      if (result.code == 0) {
        this.video = result.data;
      }
    },
    submitUploadList() {
      this.$refs.uploads.submit();
    },
    submitUploadLists() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      this.dialogImageUrl = "";
      this.video = "";
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.name;
      this.dialogVisible = true;
    },
    handlePictureCardPreviews(file) {
      this.video = file.name;
      this.dialogVisible = true;
    },
    // 限制图片大小
    beforeAvatarUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt500Kb = file.size / 1024 < 500;
      if (!isJPEG && !isJPG && !isPNG) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt500Kb) {
        this.$message.error("上传鱼米图片大小不能超过500KB!");
      }
      return (isJPEG || isJPG || isPNG) && isLt500Kb;
    },
    //   限制视频大小
      beforeAvatarUploads(file) {
       
        const isLt10M = file.size / 1024 / 1024 < 10;
  
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb"
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt10M) {
        this.$message.error("上传视频大小不能超过10MB哦!");
        return false;
      }
      
    
      return  isLt10M;
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  border: 1px solid #ccc;
  width: 20%;
  margin: 50px auto;
}
</style>
